<template>
  <div class="h-full px-4">
    <div class="flex gap-6 h-full">
      <div class="common-box flex-none h-full p-3" style="width: 330px">
        <div class="head-input-container">
          <el-input
            v-model.trim="searchNodeValue"
            placeholder="请输入关键名称"
            clearable
            prefix-icon="Search"
            style="margin-bottom: 10px"
          />
        </div>
        <div class="head-container">
          <!-- :data="dataTreeOptions" -->
          <el-tree
            :load="loadNode"
            :props="{ label: 'label', children: 'children' }"
            lazy
            :filter-node-method="filterNode"
            ref="sourceTreeRef"
            node-key="id"
            highlight-current
            :default-expanded-keys="treeExpandedKeys"
            @node-click="handleNodeClick"
          >
            <template #default="{ node, data }">
              <span class="node-label flex items-center gap-2">
                <!-- <svg-icon
                  class="node-icon"
                  :icon-class="scope.data.__config__?data.__config__.tagIcon:scope.data.tagIcon"
                /> -->
                <img :src="mapTreeIcon[data.type]" alt="" width="18" />
                {{ node.label }}
              </span>
            </template>
          </el-tree>
        </div>
      </div>
      <div class="common-box w-2 flex-auto h-full">
        <div class="h-full" v-if="showType === 'cate'">
          <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="节点管理" name="0" />
            <el-tab-pane label="数据库管理" name="1" />
          </el-tabs>

          <sdkDqCate v-if="activeName === '0'" :selectPNode="selectNode" @refresh="refreshNode" />
          <sdkDqBase v-if="activeName === '1'" :selectPNode="selectNode" @refresh="refreshNode" />
        </div>
        <div v-else-if="showType === 'ds'">
          <sdkDqDsTb :selectPNode="selectNode" @refresh="refreshNode" />
        </div>
        <div v-else-if="showType === 'tb'">
          <sdkDqDsTbCl :selectPNode="selectNode" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref, watch } from 'vue';
  import sdkDqCate from '../sdkDqCate.vue';
  import sdkDqBase from '../sdkDqBase.vue';
  import sdkDqDsTb from '../sdkDqDsTb.vue';
  import sdkDqDsTbCl from '../sdkDqDsTbCl.vue';

  // import relativeTableManage from '../sdkDqCate.vue';
  import { pageSdkDqChildCate } from '@/api/web/db/dataquery/sdkDqCate';

  import treeIcon1 from '@/assets/images/tree-icon1.png';
  import treeIcon2 from '@/assets/images/tree-icon2.png';
  import treeIcon4 from '@/assets/images/tree-icon4.png';

  const mapTreeIcon = {
    cate: treeIcon1,
    ds: treeIcon2,
    tb: treeIcon4,
  };
  const topNode = { pid: -1, id: 0, label: '资源目录', type: 'cate', children: [] };
  const activeName = ref('0');
  const selectNode = ref(topNode);
  const pageParams = ref({ pageNum: 1, pageSize: 1000 });
  const treeExpandedKeys = ref([0]);
  const searchNodeValue = ref(null);
  const sourceTreeRef = ref(null);
  const showType = ref(null); //[cate 文件夹  ds 库  tb 表]
  watch(searchNodeValue, (val) => {
    sourceTreeRef.value.filter(val);
  });

  function handleClick() {}

  function handleNodeClick(data, node, treeNode, event) {
    console.log({ data, node, treeNode, event });
    selectNode.value = data;
    showType.value = data.type;
  }

  function filterNode(value, data) {
    if (!value) return true;
    return data.label.indexOf(value) !== -1;
  }

  async function loadNode(node, resolve) {
    let result;
    const level = node.level;

    if (level === 0) {
      result = [topNode];
    } else {
      const params = { pid: level ? node.data.id : null };
      const res = await pageSdkDqChildCate(pageParams.value, params);
      console.log({ res });
      result = res?.data || [];
    }

    resolve(result);
  }
  function refreshNode() {
    if (selectNode.value) {
      let node = sourceTreeRef.value.getNode(selectNode.value.id); // 通过节点id找到对应树节点对象
      node.loaded = false;
      node.expand();
    }
  }
</script>
<style lang="scss" scoped>
  .common-box {
    background-color: #fff;
    box-shadow: 1px 0 10px 0 #e2e2e2;
  }

  .head-container {
    height: calc(100% - 42px);
    overflow: auto;
  }
</style>
